<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入组件库 -->
    <script src="javascripts/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    </style>
</head>
<body>
    <div id="app" style="width: 100%;">
        <template>
            <div  style="width: 70%; margin: 0 auto;"><el-button type="primary" @click="chaungjian" style="margin-top: 200px; margin-bottom: 30px;">新增</el-button></div>
            <el-table
              :data="tableData"
              style="width: 70%; margin: 0 auto;"
              border>
              <el-table-column
              prop="id"
              label="编号"
                width="80">
              </el-table-column>
              <el-table-column label="图片" width="80px">
                <template slot-scope="scope">
                  <img :src="scope.row.img_tp" alt="" style="max-width: 50px;min-width: 50px; max-height: 50px;min-height: 50px; border-radius:50%; overflow:hidden;" >
                  <!-- <img src="images/upload_d5dd49005f3e251a8698e05655e2277e.jpg" alt="" style="max-width: 100px; max-height: 50px;"> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="title"
                label="标题"
                width="180">
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容">
              </el-table-column>
              <el-table-column
                prop="createtime"
                label="截止日期">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              style="margin-left: 15%; margin-top: 20px;"
              @current-change="handleCurrentChange"
              @size-change = "handdddas"
              layout="total, sizes, prev, pager, next, jumper"
              :total= this.count>
            </el-pagination>
        </template>

          

          <!-- 新增 -->
          <el-dialog
            title="新增"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">

            <span>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="任务名称">
                      <el-input v-model="form.title" placeholder="请输入任务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="任务内容">
                        <el-input
                         type="textarea"
                         :rows="2"
                         placeholder="请输入内容"
                         v-model="form.content"
                         ></el-input>
                    </el-form-item>
                    <el-form-item label="图片上传">
                      <el-upload
                        class="upload-demo"
                        action="/api/tp"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-change="handlesuccess"
                        :file-list="fileList"
                        
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>

                      </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click='quedingma'>确 定</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
          </el-dialog>

          <!-- 编辑 -->
          <el-dialog
            title="编辑"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose1">

            <span>
                <el-form ref="form1" :model="form1" label-width="100px">
                    <el-form-item label="任务名称">
                      <el-input v-model="form1.title" placeholder="请输入任务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="任务内容">
                        <el-input
                         type="textarea"
                         :rows="2"
                         placeholder="请输入内容"
                         v-model="form1.content"
                         ></el-input>
                      </el-form-item>
                      <el-form-item label="图片上传">
                        <el-upload
                          class="upload-demo"
                          action="/api/tp"
                          :on-preview="handlePreview1"
                          :on-remove="handleRemove1"
                          :on-change="handlesuccess1"
                          :file-list="fileList"
                          list-type="picture">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                        <!-- <img :src="mamdaaa" alt="" style="max-width:100px; max-height:100px"> -->
  
                        </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click='quedingma1'>确 定</el-button>
              <el-button @click="dialogVisible1 = false">取 消</el-button>
            </span>
          </el-dialog>

          
          <!-- 删除 -->
          <el-dialog
            title="删除"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose2"
            >

            <span>
              确定删除
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click='quedingma2'>确 定</el-button>
              <el-button @click="dialogVisible2 = false">取 消</el-button>
            </span>
          </el-dialog>
    </div>
<!-- <script src="javascripts/moment.min.js"></script> -->
      <script>
         var app = new Vue({
           el: '#app',
           data() {
               return {
                fileList: [],
                mamdaaa: '',
                 tableData: [],
                 dialogVisible: false,
                 form: {
                    title:'',
                    content:'',
                    img_tp:''
                 },
                 form1: {
                    title:'',
                    content:'',
                    img_tp:'',
                    id: ''
                 },
                 value: '',
                 idd: '',
                 dialogVisible1: false,
                 dialogVisible2: false,
                 limit:10,
                 a:'',
                 bbb:1
               }
            },
            mounted () {
                this.mmdiwen()
            },
            methods: {
              // 图片
              handleRemove1(file, fileList) {
                console.log(file, fileList);
              },
              // 图片
              handleRemove(file, fileList) {
                console.log(file, fileList);
              },
              handlesuccess(file, fileList) {
                if (file.status == "success") {
                  this.form.img_tp = file.response.data
                } else {
                  return
                }
               
                // console.log(fileList);
                
              },
              handlesuccess1(file, fileList) {
                if (file.status == "success") {
                  this.form1.img_tp = file.response.data
                } else {
                  return
                }
              
              },
              // 图片
              handlePreview(file) {
                console.log(file);
              },
              // 图片
              handlePreview1(file) {
                console.log(file);
              },
              // 获取列表数据
             mmdiwen() {
                axios({
                method:'get',
                url:'/api/list',
                params: {
                  page: this.bbb,
                  limit: this.limit
                }
                }).then((response) =>{    
                          //这里使用了ES6的语法
                   this.tableData  =  response.data.data   //请求成功返回的数据
                  //  遍历时间戳改成年月日
                   for (let i = 0; i < this.tableData.length; i++) {
                    this.a = this.tableData[i].createtime
                    var date = new Date(parseInt(this.a))
                    var Y = date.getFullYear() + '-'
                    var M = (date.getMonth() + 1) + '-'
                    var D = date.getDate() + ' '
                    var h = date.getHours() + ':'
                    var m = date.getMinutes() + ':'
                    var s = date.getSeconds()
                    this.tableData[i].createtime = Y + M + D + h + m + s
                   }
                   this.count =  response.data.count //请求成功返回的数据
                }).catch((error) =>{
                    console.log(error)       //请求失败返回的数据
                })
             }, 
             handleCurrentChange(data) {
              this.bbb = data
              this.mmdiwen()
             },
             handdddas(data) {
              this.limit = data
              this.mmdiwen()
             },
             chaungjian() {
                this.dialogVisible = true
             },
            //  新增关闭
             handleClose() {
                this.dialogVisible = false
             },
            //  编辑关闭
             handleClose1() {
                this.dialogVisible1 = false
             },
            //  删除关闭
             handleClose2() {
                this.dialogVisible2 = false
             },
            //  新增
             quedingma () {
                 console.log(this.form );
                axios({
                method:'post',
                url:'/api/new',
                data: this.form,   //这里是发送给后台的数据
                dataType: "json",
                }).then((res) =>{   
                    this.dialogVisible = false
                    //这里使用了ES6的语法
                    this.$message({
                      message: '新增成功',
                      type: 'success'
                    });   //请求成功返回的数据
                    this.form = {}
                    this.fileList = []
                    this.mmdiwen()
                })
             },
            //  编辑打开
             handleEdit(id,data) {
               this.mamdaaa = data.img_tp
              //  console.log(this.fileList.url);
               
              this.dialogVisible1 = true
              this.form1 = data
              this.id = data.id
              // console.log(this.id );
              
            },
            // 修改
            quedingma1 () {
              //  this.getFullTime(this.form1.deadline)
                 console.log(this.form1 );
                axios({
                method:'post',
                url:'/api/update',
                data: this.form1,   //这里是发送给后台的数据
                dataType: "json",
                }).then((res) =>{   
                    this.dialogVisible1 = false
                    //这里使用了ES6的语法
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    });   //请求成功返回的数据
                    this.form1 = {}
                    this.fileList = []
                    this.mmdiwen()
                })
            },
            // 删除打开
            handleDelete (id) {
              this.idd = id
              this.dialogVisible2 = true
            },
              // 删除
              quedingma2 () {
                axios({
                method:'post',
                url:'/api/del',
                data: {id:this.idd },   //这里是发送给后台的数据
                dataType: "json",
                }).then((res) =>{   
                    this.dialogVisible2 = false
                    //这里使用了ES6的语法
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });   //请求成功返回的数据
                    this.mmdiwen()
                })
            }
            }
            
         })
      </script>
</body>
</html>